<template>
  <div>
    <form-block-title :title="showFormParam.formTitle"/>
    <el-row :gutter="48">
      <template v-for="(formField) in showFormParam.showFormFieldList">
        <el-col v-if="formField.columnType === 'SELECT'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
          <el-form-item :label="formField.chineseName" :prop="formField.columnName">
            <el-select v-if="toggleButton.altering" size="small"  v-model="form[formField.columnName]" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in getDict(formField.dict)" :key="item.dictValue"
                         :label="item.dictLabel"
                         :value="item.dictValue"
              ></el-option>
            </el-select>
            <span v-if="!toggleButton.altering">{{ dictLabelFormat(formField.dict, form[formField.columnName]) }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="formField.columnType === 'INPUT'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
          <el-form-item
            :label="formField.chineseName" :prop="formField.columnName"
          >
            <el-input size="small" v-if="toggleButton.altering" style="width: 100%" v-model="form[formField.columnName]" :placeholder="'请输入'+formField.chineseName"
            >
              <template slot="append" v-if="formField.unit">{{formField.unit}}</template>
            </el-input>
            <span v-if="!toggleButton.altering">{{ formField.format?formField.format(form[formField.columnName]):form[formField.columnName]}}<span>{{formField.unit ? formField.unit:''}}</span></span>
          </el-form-item>
        </el-col>
        <el-col v-if="formField.columnType === 'DATE'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
          <el-form-item :label="formField.chineseName" :prop="formField.columnName"
          >
            <el-date-picker v-if="toggleButton.altering" size="small" v-model="form[formField.columnName]" :picker-options="pickerOptions"
                            placeholder="请选择时间" style="width: 100%" type="date"
            ></el-date-picker>
            <span v-if="!toggleButton.altering">{{ parseFormatTime(form[formField.columnName], formFielddateFormat) }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="formField.columnType === 'DATETIME'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
          <el-form-item>
            <el-date-picker  v-if="toggleButton.altering" v-model="form[formField.columnName]" placeholder="请选择日期"
                             size="small"
                             style="width:100%" type="month" value-format="yyyy-MM" :picker-options="daterangeOptions"
            />
          </el-form-item>
          <span v-if="!toggleButton.altering">{{ parseFormatTime(form[formField.columnName], formFielddateFormat) }}</span>
        </el-col>
        <el-col v-if="formField.columnType === 'DATERANGE'" :xl="formField.xl" :md="formField.xl" :sm="formField.sm" :xs="formField.xs">
          <el-form-item>
            <el-date-picker
              v-if="toggleButton.altering"
              v-model="form[formField.columnName]"
              type="daterange"
              size="small"
              style="width: 100%"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <span v-if="!toggleButton.altering">{{form[formField.columnName][0] + '至' + form[formField.columnName][1]}}</span>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </div>
</template>
<script>
import FormBlockTitle from '@/components/ScFormBlockTitle/index'
import {parseTime} from "@/utils/ruoyi";

export default {
  name: 'DrShowForm',
  components: { FormBlockTitle },
  props:{
    showFormParam:{
      type: Object,
      default: null
    },
    form:{
      type: Object,
      default: null
    },
    toggleButton:{
      type: Object,
      default: null
    }
  },
  data() {
    return {
      id: -1,
      // 弹出层标题
      title: '录入信息',
      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      daterangeOptions:{
        disabledDate (time) {
          // 禁用以后的时间
          return time.getTime() > Date.now() - 8.64e6
        },
      },
      dictOptionsMap:{},
      formType : 'add'
    }
  },
  created() {
    for(let i in this.showFormParam.showFormFieldList) {
      if(this.showFormParam.showFormFieldList[i].columnType === 'SELECT') {
        this.getDicts(this.showFormParam.showFormFieldList[i].dict).then(response => {
          this.dictOptionsMap[this.showFormParam.showFormFieldList[i].dict] = response.data
        })
      }
    }
  },
  methods: {
    init(id) {
      //编辑页面加载数据
      this.$emit('initEdit',id)
    },
    dictLabelFormat(options, selectedValue) {
      if(this.dictOptionsMap[options]) {
        return this.selectDictLabel(this.dictOptionsMap[options], selectedValue)
      }
    },
    parseFormatTime(data, format) {
      return parseTime(data, format)
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
      });
    },
    // 表单重置
    reset() {
      this.form = {}
    }
  }
}
</script>
